<template>
  <view>
    <view class="flex-col page">
  <view class="flex-col justify-start section">
    <view class="flex-col section_2">
      <view class="flex-row justify-between items-center self-stretch group">
        <view class="flex-col justify-start items-center text-wrapper"><text class="text">9:41</text></view>
        <view class="flex-row">
          <image
            class="image"
            src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=cad55fb5749ee5623a1a96ab698bce9d.png"
          />
          <image
            class="image_2 ml-5"
            src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=3b01dd15dda28d40cbe1f2bd46f74d48.png"
          />
          <image
            class="image_3 ml-5"
            src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=ac62a89784025ae5f7b002210466f1e6.png"
          />
        </view>
      </view>
      <image
        class="self-start image_4"
        src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=f9a204c99c04ee262a8e6a200a1c9d7f.png"
      />
      <text class="self-start font text_2">挑选属于Ta的声线色彩</text>
      <view class="flex-col self-stretch group_2">
        <view class="flex-col justify-start section_3">
          <view class="flex-row items-center section_4 view">
            <view class="flex-col justify-start shrink-0 section_5">
              <view class="flex-col justify-start items-end image-wrapper">
                <image
                  class="image_6"
                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=b7015e373b6bf19cc111d244a6656f23.png"
                />
              </view>
            </view>
            <view class="flex-col flex-1 ml-9">
              <view class="flex-row items-center">
                <text class="font_2">海绵宝宝超绝啤酒肚</text>
                <image
                  class="image_5 ml-3"
                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=5ea343c941935e7fef989d05665700cf.png"
                />
              </view>
              <text class="mt-6 font_3 text_3">用一首歌的时间带你回到属于孩子最纯正的年代以及最开心的年代以及</text>
            </view>
          </view>
        </view>
        <view class="flex-col justify-start section_3 mt-15">
          <view class="flex-row items-center section_4 view_2">
            <view class="flex-col justify-start items-center shrink-0 relative section_5">
              <image
                class="image_7"
                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=663a3ca4cf186fa10f750493616340df.png"
              />
              <image
                class="image_6 pos"
                src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=b7015e373b6bf19cc111d244a6656f23.png"
              />
            </view>
            <view class="flex-col flex-1 ml-9">
              <view class="flex-row items-center">
                <text class="font_2">海绵宝宝超绝啤酒肚</text>
                <image
                  class="image_5 ml-3"
                  src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=b4f6e4dfe6b51f890d8b6280184638cb.png"
                />
              </view>
              <text class="font_3 text_4 mt-7">用一首歌的时间带你回到属于孩子最纯正的年代以及最开心的年代以及</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="flex-col justify-start section_6 mt-342">
    <view class="flex-col justify-start section_7">
      <view class="flex-row justify-center items-center section_8">
        <view class="flex-col justify-start section_9">
          <view class="flex-col justify-start items-end image-wrapper_2">
            <image
              class="image_6"
              src="https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=b7015e373b6bf19cc111d244a6656f23.png"
            />
          </view>
        </view>
        <text class="ml-8 font_2">海绵宝宝超绝啤酒肚</text>
        <view class="ml-8 flex-col justify-start section_10">
          <view class="flex-col justify-start section_11">
            <view class="flex-col justify-start items-center text-wrapper_2">
              <text class="font text_5">选择</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        
      };
    }
  }
</script>

<style lang="scss" scoped>
.ml-5 {
  margin-left: 5px;
}
.ml-9 {
  margin-left: 9px;
}
.ml-3 {
  margin-left: 3px;
}
.mt-15 {
  margin-top: 15px;
}
.mt-7 {
  margin-top: 7px;
}
.mt-342 {
  margin-top: 342px;
}
.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-image: linear-gradient(180deg, #fff8c7 0%, #fff9c800 97.7%);
}
.section_2 {
  padding: 12px 15px 4px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=821d363b52f5b414111c8b5fa88c601c.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.group {
  padding-left: 6px;
}
.text-wrapper {
  padding: 4px 0;
  border-radius: 24px;
  width: 54px;
  height: 21px;
}
.text {
  color: #000000;
  font-size: 15px;
  font-family: Alibaba PuHuiTi 2;
  line-height: 11px;
}
.image {
  width: 17px;
  height: 11px;
}
.image_2 {
  width: 15px;
  height: 11px;
}
.image_3 {
  width: 24px;
  height: 11px;
}
.image_4 {
  margin-top: 19px;
  border-radius: 50%;
  width: 26px;
  height: 26px;
}
.font {
  font-size: 20px;
  font-family: Source Han Sans SC;
  line-height: 19px;
  font-weight: 700;
  color: #333333;
}
.text_2 {
  margin-top: 18px;
}
.group_2 {
  margin-top: 13px;
}
.section_3 {
  padding: 4px 0;
  border-radius: 24px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=79ed1c32a930d17061a2d1677103de30.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_4 {
  margin: 0 2px;
}
.view {
  padding: 14px 12px 16px;
  background-color: #ffffff;
  border-radius: 24px;
}
.section_5 {
  background-color: #ffffff;
  border-radius: 50%;
  width: 67.5px;
  height: 67.5px;
  border-left: solid 1px #666666;
  border-right: solid 1px #666666;
  border-top: solid 1px #666666;
  border-bottom: solid 1px #666666;
}
.image-wrapper {
  padding-top: 50px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=f3b72833b627389858f9b508c5361449.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 66px;
  height: 66px;
}
.image_6 {
  border-radius: 8px;
  width: 26.5px;
  height: 16.5px;
}
.image_5 {
  width: 12px;
  height: 12px;
}
.font_3 {
  font-size: 12px;
  font-family: Source Han Sans SC;
  line-height: 18px;
}
.text_3 {
  color: #999999;
  text-align: justify;
}
.view_2 {
  padding: 14px 12px 16px;
  background-color: #ffe944;
  border-radius: 24px;
}
.image_7 {
  width: 66px;
  height: 66px;
}
.pos {
  position: absolute;
  right: 0;
  bottom: -1px;
}
.text_4 {
  color: #666666;
  text-align: justify;
}
.section_6 {
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=6e1f5dfff927ce85f5cf0c9ccc409364.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_7 {
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=54184c86210fcf2c095b0055e2e007b2.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_8 {
  padding: 16px 0 36px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=496473ac7817dd444c8f29fc31b876c8.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.section_9 {
  background-color: #ffffff;
  border-radius: 50%;
  width: 60.5px;
  height: 60.5px;
  border-left: solid 1px #666666;
  border-right: solid 1px #666666;
  border-top: solid 1px #666666;
  border-bottom: solid 1px #666666;
}
.image-wrapper_2 {
  padding-top: 42px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2d88fdd1df3a9e6987ec55fcfed58ee5.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 58px;
  height: 58px;
}
.font_2 {
  font-size: 16px;
  font-family: Source Han Sans SC;
  line-height: 15px;
  color: #333333;
}
.section_10 {
  border-radius: 29px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=2e0978f4d2df0ea9139bc3dfbc63bc7e.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 122px;
  height: 48px;
}
.section_11 {
  margin: 0 2px;
  background-color: #ffe944;
  border-radius: 29px;
  width: 119px;
}
.text-wrapper_2 {
  padding: 16px 0 12px;
  background-image: url('https://ide.code.fun/api/image?token=678483434ae84d00122350a5&name=09fc66a6b4f8ddfbad7b03e31b24762a.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 119px;
}
.text_5 {
  line-height: 19px;
}
</style>
    
      